<template>
    <div class="container">
        <h3>物料管理</h3>
            <el-row style="margin-top:20px;">
                <el-col :span="17" style="display: flex;align-items: center;">
                    <template>
                    <div style="font-size:14px;">物料类型</div>
                    <el-select v-model="value" placeholder="请选择" style="width: 15%;margin: 0 10px;"  @change="init1">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    </template>
                    <el-input placeholder="请输入关键词" v-model="searchName1" style="width:300px;">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        <el-button slot="append" @click="handleSearch1">搜索</el-button>
                    </el-input>
                </el-col>
                <el-button style="float:right; margin-right: 10px" @click="download">下载模板</el-button>
                <!-- <el-button style="float:right; margin-right: 10px" >导入模板</el-button> -->
                <el-upload
                class="upload-daoru"
                ref="upload"
                :action="action"
                :on-change="uploadonchange"
                accept=".xlsx,.xls"
                :show-file-list="false"
                :auto-upload="false"
            >
                <el-button slot="trigger" size="small">导入模板</el-button>
            </el-upload>
                <el-button type="primary"  style="float:right; margin-right: 10px"   @click="handleadded">新增物资</el-button>
            </el-row>
            <el-table
                :data="tableData1"
                border
                style="margin-top:20px;"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="materialName" sortable label="物料名称"></el-table-column>
				<el-table-column prop="materialCode" sortable label="物料代码"></el-table-column>
				<el-table-column prop="materialType" sortable label="物料类型"></el-table-column>
                <!-- <el-table-column prop="createTime" sortable label="添加时间"></el-table-column> -->
                <el-table-column prop="materialSpecification" sortable label="规格">
                    <template slot-scope="scope">
                        {{scope.row.materialSpecification}}{{scope.row.unit}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            style="color:red;"
                            @click="handleDelete1(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage1"  @current-change="handleCurrentChange1" :total="total1" style="margin-top:20px"></el-pagination>

    </div>
</template>

<script>
    import {materialManagement_findBylist,materialManagement_delete,materialManagement_search,materialManagement_daoru } from "@/request/produceApi"

    export default {

        data() {
            return {
                options: [],
                value: '',
                showImg:false,
　　　　　　      imgSrc: '',
                state:0,
                currentPage1:1,
                pagesize:10,
                total1:0,
                searchName1: '',
                tableData1: [],
                boxCode:'',
                boxCode1:'',
                action:'',
                added:true,//新增
                edit:true,//编辑
                del:true,//删除
                userId: {
                    id: ''
                }
            };
        },
        created(){


        },
        mounted(){
          var lj = localStorage.getItem('lj');
          if( lj == "生产") {
            this.options = [
              {
                value: '原料',
                label: '原料'
              }, {
                value: '辅料',
                label: '辅料'
              }, {
                value: '半成品',
                label: '半成品'
              }, {
                value: '成品',
                label: '成品'
              }
            ]
          }else{
            this.options = [
              {
                value: '半成品',
                label: '半成品'
              }, {
                value: '成品',
                label: '成品'
              }
            ]
          }
            this.init1();
            this.judgmentAuthority();
        },

        methods: {
            //查询所有物料
            init1(){
                let data = {
                    page:this.currentPage1,
                    materialType:this.value,
                    materialName:this.searchName1
                }
                materialManagement_findBylist(data).then((res) => {
                    this.tableData1 = res.data.content
                    this.total1 = res.data.totalElements
                })
            },
            //模板下载
            download() {
                const companyId =  localStorage.getItem('companyId')
                //  window.location.href = "http://" + window.location.host + "/供应商模版导入.xlsx";
                // window.location.href = "http://47.104.241.124:8901/user/outUser";
                window.location.href = "http://192.168.0.148:8887/management/efforts?" + companyId
            },
            //导入模板
            uploadonchange(file) {
                // console.log(file,'111');
                this.userId.id = JSON.parse(localStorage.getItem('userid'))
                let formData = new FormData();
                formData.append('file', file.raw);
                formData.append('file', this.userId.id);
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                };
                materialManagement_daoru(formData).then((res) =>{
                    if (res.code == 200) {
                        this.$notify({
                            title: '操作成功',
                            message: '导入成功',
                            type: 'success'
                        });
                        this.init1()
                    } else{
                        this.$notify.error({
                            title: '操作失败',
                            message: '导入失败',
                            type: 'error'
                        });
                    }
                })
            },
            //下一页
            handleCurrentChange1(val){
                this.currentPage1 = val
                this.init1()
            },
            //新增物料
            handleadded(){
                this.$router.push({
                    path:'/material/added',
                })
            },
            //编辑物料
            handleEdit(index,row){
                this.$router.push({
                    path: '/material/edit',
                    query: {
                        id: row.id,
                    }
                });
            },
            //删除物料
            handleDelete1(index,row){
                this.$confirm('确认要删除该物资吗?此操作不可恢复,请谨慎操作', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let deletes = {
                        id: row.id
                    }
                   materialManagement_delete(deletes).then((res) => {
                       if(res.code == 200){
                           this.$notify({
                                title: '提示',
                                message: '删除成功',
                                type: 'success'
                            });
                            this.init1()
                        }
                   })
                });
            },
            handleSearch1() {
               this.init1()
            },
            //判定操作按钮显示
            judgmentAuthority() {
                var type = JSON.parse(localStorage.getItem('panduanzhuangtai'));
                type.map((item1) => {
                    if (item1.name == '物料管理' && item1.children != null) {
                        for (var i = 0; i < item1.children.length; i++) {
                            if (item1.children[i].name == '新增') this.added = false;
                            if (item1.children[i].name == '编辑') this.edit = false;
                            if (item1.children[i].name == '删除') this.del = false;
                        }
                    }
                });
            }


        }
    }
</script>

<style scoped lang="less">
/deep/.upload-daoru {
    background: #eee;
    .el-upload {
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px;
    }
}
.upload-demo .el-upload--text{
    border: none;
    width: auto;
    height: auto;
    border-radius: 0;
    float: right;
    margin-right: 10px
}
.el-table{ margin-top: 20px;}
.el-pagination{
    text-align: center;
}
/* .el-row{ margin-bottom: 20px;} */
.el-pagination{
    text-align: center;
}
.el-col{
    margin-bottom:0;
}

</style>
